import React, { useState } from 'react';
import { Row, Col, Upload, Radio, Tooltip } from 'antd';
import { PlusOutlined, LoadingOutlined, DeleteOutlined, CheckOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import ImageDisplay from './ImageDisplay';
import TipsModals from '../../modals/TipsModals';
import { defaultImgList } from '@/common/app/constants';

export interface SceneImageType {
  id: string;
  type: string;
  url?: string;
  name: string;
}

interface SceneImageSelectorProps {
  sceneImages: SceneImageType[];
  uploadedImageUrl: string | null;
  selectedImage: string | null;
  customSceneImages: string[];
  sceneImageOption: 'match' | 'custom';
  sceneImageLoading: boolean;
  onOptionChange: (option: 'match' | 'custom') => void;
  onImageSelect: (imageId: string) => void;
  onImageDelete: (imageUrl: string) => void;
  uploadProps: UploadProps;
}

const SceneImageSelector: React.FC<SceneImageSelectorProps> = ({
  sceneImages,
  uploadedImageUrl,
  selectedImage,
  customSceneImages,
  sceneImageOption,
  sceneImageLoading,
  onOptionChange,
  onImageSelect,
  onImageDelete,
  uploadProps,
}) => {
  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
  const [imageToDelete, setImageToDelete] = useState<string | null>(null);

  const handleOptionChange = (e: any) => {
    onOptionChange(e.target.value);
  };

  const displayCustomImages = customSceneImages;



  const handleDelete = (imageUrl: string) => {
    setImageToDelete(imageUrl);
    setDeleteModalVisible(true);
  };

  const confirmDelete = () => {
    if (imageToDelete) {
      onImageDelete(imageToDelete);
      setDeleteModalVisible(false);
      setImageToDelete(null);
    }
  };

  const cancelDelete = () => {
    setDeleteModalVisible(false);
    setImageToDelete(null);
  };

  return (
    <div>
      <div className="font-normal text-[#4E5969] mb-2">
        场景图片
        <span className="text-error text-xs ml-1">*</span>
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div
          className={`p-2 rounded-md border border-1 cursor-pointer ${sceneImageOption === 'match' ? 'border-[#1B6DFA] bg-[#F0F7FF]' : 'border-[#E5E6EB] bg-[#FFF]'
            }`}
          onClick={() => onOptionChange('match')}
        >
          <Radio.Group onChange={handleOptionChange} value={sceneImageOption} className="w-full custom-radio">
            <Radio value="match" className="w-full flex items-center">
              <div className={`text-[14px] ${sceneImageOption === 'match' ? 'border-primary border-1 bg-[#F0F7FF] text-primary' : ''}`}>与应用logo一致</div>
            </Radio>
          </Radio.Group>
        </div>
        <div
          className={`p-2 rounded-md border border-1 cursor-pointer ${sceneImageOption === 'custom' ? 'border-[#1B6DFA] bg-[#F0F7FF]' : 'border-[#E5E6EB] bg-[#FFF]'
            }`}
          onClick={() => {
            onOptionChange('custom')
          }}
        >
          <Radio.Group onChange={handleOptionChange} value={sceneImageOption} className="w-full custom-radio">
            <Radio value="custom" className="w-full flex items-center">
              <div className={`text-[14px] ${sceneImageOption === 'custom' ? 'border-primary border-1 bg-[#F0F7FF] text-primary' : ''}`}>自定义</div>
            </Radio>
          </Radio.Group>
        </div>
      </div>

      {sceneImageOption === 'custom' && (
        <div className="mt-4">
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <Upload {...uploadProps} className="w-full custom-scene">
                <div
                  className="h-[100px] w-full max-w-full rounded-md border border-dashed border-[#E5E6EB] flex items-center justify-center cursor-pointer hover:border-[#7B67EE]"
                >
                  <div className="flex flex-col items-center">
                    {sceneImageLoading ? (
                      <LoadingOutlined />
                    ) : (
                      <PlusOutlined className="text-2xl text-[#C9CEE2]" />
                    )}
                    <span className="text-sm text-[#1D2129] mt-2">自定义</span>
                  </div>
                </div>
              </Upload>
            </Col>

            {displayCustomImages?.filter(logoUrl => logoUrl && !defaultImgList.includes(logoUrl)).map((imageUrl) => (
              <Col span={12} key={imageUrl}>
                <div className="relative group">
                  <ImageDisplay
                    src={imageUrl}
                    alt="自定义场景"
                    isSelected={selectedImage === imageUrl}
                    containerClassName="h-[100px] rounded-md"
                    objectFit="contain"
                  />
                  <div className="absolute inset-0 flex items-center justify-center gap-10 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity rounded-md">
                    <Tooltip title="选中">
                      <div
                        className="w-8 h-8 rounded-full flex items-center justify-center cursor-pointer"
                        onClick={(e) => {
                          e.stopPropagation();
                          onImageSelect(imageUrl);
                        }}
                      >
                        <CheckOutlined className="text-white" />
                      </div>
                    </Tooltip>
                    <Tooltip title="删除">
                      <div
                        className="w-8 h-8 rounded-full flex items-center justify-center cursor-pointer"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleDelete(imageUrl);
                        }}
                      >
                        <DeleteOutlined className="text-white" />
                      </div>
                    </Tooltip>
                  </div>
                </div>
              </Col>
            ))}

            {sceneImages.map((image) => (
              <Col span={12} key={image.id}>
                <ImageDisplay
                  key={image.id}
                  src={image.id}
                  alt={image.name}
                  isSelected={selectedImage === image.id}
                  onClick={() => onImageSelect(image.id)}
                  containerClassName="h-[100px] rounded-md"
                  objectFit="contain"
                />
              </Col>
            ))}
          </Row>
        </div>
      )}
      <TipsModals
        open={deleteModalVisible}
        onOk={confirmDelete}
        onCancel={cancelDelete}
        okText="删除"
        cancelText="取消"
      >
        确定要删除这张图片吗？
      </TipsModals>
      <style>
        {`
          .custom-scene {
            display: flex !important;
          }
          .custom-scene .ant-upload{
            width: 100% !important;
          }
        `}</style>
    </div>
  );
};

export default SceneImageSelector; 